<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.69.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
</head>

<body>
    <div class="fun-menu">
        提示内容的样式修改，直接覆盖css的.cpc-draw-tips
        <button onclick="measureAndDraw('DrawPoint')">绘点</button>
        <button onclick="measureAndDraw('DrawPolyline')">绘线</button>
        <button onclick="measureAndDraw('DrawPolygon')">绘面</button>
        <button onclick="measureAndDraw('MeasurePoint')">测点</button>
        <button onclick="measureAndDraw('MeasureDistance')">测距</button>
        <button onclick="measureAndDraw('MeasureVertical')">测高</button>
        <button onclick="measureAndDraw('MeasureArea')">测面</button>
        <button onclick="measureAndDraw('MeasureVH')">水平垂直测量</button>
        <button onclick="updateOption()">修改样式(实例中修改了绘点的样式)</button>
        <button onclick="clear()">清除</button>
    </div>
    <div id=cesiumContainer></div>

    <script src="http://cdn.staticfile.org/cesium/1.69.0/Cesium.js"></script>
    
    <script src="../libs/cpc/index.js"></script>
    <script>
        const map = new cpc.Map({
            container: "cesiumContainer",
            baseMaps: [
                "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            ]
        });
        var layer = new cpc.Tile3dLayer({
                name: "tile3d",
                // url: "http://localhost/title3d/zy3dtiles/tileset.json"
                url: "http://data.marsgis.cn/3dtiles/qx-shequ/tileset.json",
            });
            layer.when(() => {
                layer.setHeight(10);
                layer.flyTo(1);
            });
            map.add(layer);
        function measureAndDraw(type) {
                // 参数未设计,效果中，都有设置可视缩放，所以这里暂时适合小范围测量
                // type的枚举类为;//cpc.EDrawManager.DrawPoint
                map.drawManager
                    .activate(type)
                    .then((res) => {
                        console.log("结果", res);
                    })
                    .catch((error) => {
                        console.error("结束", error);
                    });
            }
            function  updateOption(){
                map.drawManager.setOption(cpc.EDrawManager.DrawPoint, {
                    point: {
                        pixelSize: 10,
                        color: Cesium.Color.YELLOW,
                        outlineColor:Cesium.Color.RED,
                        outlineWidth:3,
                    }
                })
            }
            function clear() {
                map.drawManager.deactivate();
            }
    </script>
</body>

</html>